<template>
  <div>
    <van-nav-bar
      title="答题模式"
      left-text="返回"
      left-arrow
      @click-left="back"
    />

    <div style="padding: 8px;margin-top: 10px">
      <div style="font-size: 18px;line-height: 24px;margin-bottom: 10px;">{{q.title}}</div>
      <div class="options">
        <van-checkbox-group v-model="result[num]">
          <van-checkbox icon-size="24px" class="opt" v-for="opt in q.options" :key="opt" :name="opt.substr(0,1)">
            {{opt}}
          </van-checkbox>
        </van-checkbox-group>
      </div>
      <van-button type="primary" size="large" @click="confirm">确定</van-button>
    </div>

    <div style="position: fixed;left:0;right:0;bottom: 10px">
      <!-- <div>倒计时: {{timer}} 秒</div> -->
    </div>
  </div>
</template>

<script>
import question from '../question.json'
import Vue from 'vue';
import { Toast, Dialog } from 'vant';

Vue.use(Toast);
export default {
  data () {
    return {
      list: [],
      num: 0, // 当前题号
      result: [],
      timer: 10 * 60, // 10分钟
      q: {}
    }
  },
  created () {
    // 20 个随机数
    // let arrRand = []
    // let n
    // for (; arrRand.length<20;) {
    //   n = Math.floor(Math.random() * 10000 / question.length)
    //   if (arrRand.indexOf(n) == -1) {
    //     arrRand.push(n)
    //   }
    // }

    // for (let i of arrRand) {
    //   this.list.push(question[i])
    // }

    // setInterval(this.t, 1000)
    this.gen()
  },
  methods: {
    back () {
      this.$router.go(-1)
    },
    // t () {
    //   this.timer--
    //   if (this.timer < 0) {
    //   }
    // }
    gen () {
      this.result = []
      this.q = question[Math.floor(Math.random() * 10000 / question.length)]
    },
    confirm () {
      let r = []
      for (let n of this.result[0]) {
        r.push(n)
      }
      r.sort()
      // console.log(r.join(''))
      // console.log(this.q.answer)
      if (r.join('') == this.q.answer) {
        // 回答正确
        Toast.success('回答正确')
        this.gen()
      } else {
        // 回答错误
        Dialog.alert({
          title: '正确答案',
          message: this.q.answer,
        }).then(() => {
          this.gen()
        });
      }
    }
  }
}
</script>
<style scoped>
.opt {
  line-height: 40px;
  height: 35px;
}
.options .van-button__content{
  justify-content: left;
  padding-left: 10px;
}

</style>
